@import "shared";
@import "commonvars";

@import "reset";

@import "sidebar";
@import "sidebar-theme";

@import "snippet";
@import "snippet-theme";

@import "topbar";
@import "topbar-theme";

@import "build-settings";
@import "build-settings-theme";

@import "status";
@import "status-theme";

body {
  font-family: $font-family;
  font-size: $text-size;
  line-height: $text-line-height;
}

body.scastie {
  overflow: hidden;
}

a:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 150%;
}

.hide {
  display: none;
}

.fa {
  font-size: 16px;
  width: 20px;
  text-align: left;
}

.fa-spin {
  font-size: 16px;
  width: 16px;
}

.inner-container {
  overflow-y: auto;
}

.btn {
  cursor: pointer;
}

.debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  background-color: red;
  color: white;
}

@include sidebar();
@include snippet();
@include buildSettings();
@include status();
@include topbar();

@mixin appStyles($class) {
  .scastie {
    .app.#{$class} {
      color: $text-color;
      background: $background-color;

      a {
        color: $link-color;
      }

      .btn {
        cursor: pointer;
        &:hover {
          color: $hover-option-color;
        }
      }

      @include topbarTheme($class);
      @include sidebarTheme($class);
      @include snippetTheme($class);
      @include buildSettingsTheme($class);
      @include statusTheme($class);
    }
  }
}

@import "dark-app";
@import "light-app";